<template>
  <div class="home">
    <dv-full-screen-container class="container">
      <div class="header">
        <div class="title">
          <!-- <img :src="Logo" style="width: 100px;height: 100px;"/> -->
          <div class="logo">
            <svg-icon class-name="innolux-icon" icon-class="innolux" :style="{width: `${80 / dpr}px`, height: `${40 / dpr}`}" />
            <div :style="{ height: `${60 / dpr}`, marginTop: `${13 / dpr}px`}" style="font-size: 1rem;font-weight: 700;background: linear-gradient(120deg, #409EFF, #83D0FF); -webkit-background-clip: text; color: transparent;">群志光電智慧物流</div>
          </div>
          <h1>
            <svg-icon style="position: absolute;left: 31%;" class-name="valeotext-icon" icon-class="valeotext" :style="{width: `${120 / dpr}px`, height: `${60 / dpr}`}"/>
            入库Port口{{ currentPort }}
          </h1>
          <div class="time">{{time}}</div>
        </div>
      </div>
      <div class="container_body">
        <iPortComponent :port="currentPort"/>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import Logo from '../assets/img/IWS_LOGO_N.png'
import iPortComponent from '../components/iPortComponent.vue'
export default {
  components: {
    iPortComponent
  },
  data() {
    return {
      time: '',
      timer: [],
      // port口
      currentPort: null,
      Logo: Logo,
      dpr: null
    }
  },
  created() {
    // 截取url
    this.getPort()
  },
  mounted() {
    this.dpr = window.devicePixelRatio
    this.getTime()
    this.timer.push(
      setInterval(() => {
        this.getTime()
      }, 1000)
    )
  },
  beforeDestroy() {
    this.cleanTimer()
  },
  methods: {
    getPort() {
      this.currentPort = this.$route.params.id
      // console.log(port)
    },
    // 清除timer
    cleanTimer() {
        for (let i = 0; i < this.timer.length; i++) {
          clearInterval(this.timer.pop())
        }
      },
      getTime() {
        let yy = new Date().getFullYear()
        let mm = new Date().getMonth() + 1
        let dd = new Date().getDate()
        let hh =
          new Date().getHours() < 10
            ? '0' + new Date().getHours()
            : new Date().getHours()
        let mf =
          new Date().getMinutes() < 10
            ? '0' + new Date().getMinutes()
            : new Date().getMinutes()
        let ss =
          new Date().getSeconds() < 10
            ? '0' + new Date().getSeconds()
            : new Date().getSeconds()
        this.time = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
      }
  }
}
</script>

<style lang="less" scoped>
.home {
  height: 100vh;
}
.container {
  background-image: url('../assets/img/1-背景.png');
  background-size: 100% 100%;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.header {
  text-align: center;
  background-image: url('../assets/img/2-标题23.png');
  background-size: 100% 110%;
  height: 5%;
  h1 {
    margin: 0;
    color: #fff;
    font-size: 40px;
  }
  .title {
    position: relative;
  }
  .logo {
    display: flex;
    color: #fff;
    position: absolute;
    left: 1%;
    top: 0px;
  }
  .time {
    position: absolute;
    right: 2%;
    color: #fff;
    top: 5px;
    font-size: 24px;
    font-weight: bold;
  }
}
.container_body {
  flex: 1;
}
</style>